<template>
    <div @click="click" class="file-upload">
        <slot></slot>
        <input type="file" ref="file" @change="onChange"
               :accept="input.accept"
               :disabled="input.disabled"
               :multiple="input.multiple">
        <div class="progress" v-if="upload_progress !== null">
            <div>{{ upload_progress }}%</div>
        </div>
    </div>
</template>

<script>
    import fileUpload from '../../api/fileUpload';

    export default {
        props: ['value', 'crop', 'max', 'disabled', 'multiple', 'accept'],
        name: 'file-upload',
        data() {
            return {
                input: {
                    accept: this.accept || '.jpg,.png,.jpeg',
                    disabled: this.disabled || false,
                    multiple: this.multiple || false
                },
                upload_progress: null,
                options: {
                    maxWidth: 2000,
                    maxHeight: 2000,
                    crop: !!this.crop,
                },
            };
        },
        computed: {},
        created() {
            if (this.max) {
                this.options.maxWidth = this.max.width || this.options.maxWidth;
                this.options.maxHeight = this.max.height || this.options.maxHeight;
            }
        },
        methods: {
            click() {
                if (this.upload_progress || this.disabled) return;
                this.$refs.file.click();
            },
            async onChange(event) {
                this.input.disabled = true;

                const drive = {
                    token: SessionStore.get('loginMesg').token
                };

                const test = /.jpg|.png|.jpeg/.test(this.input.accept);
                const uploadUrl = test ? 'aliyun/oss/img/sign' : 'aliyun/oss/pdf/sign';

                const filesUrl = await fileUpload(event.target.files, this.options, {
                    onUploadProgress: (e) => {
                        this.upload_progress = (e.loaded / e.total).toFixed(2);
                        this.upload_progress = parseInt(this.upload_progress * 100);
                    }
                }, null, drive, uploadUrl);

                if (this.multiple) {
                    this.$emit('emitFiles', filesUrl)
                } else {
                    this.$emit('input', filesUrl[0].url);
                }

                event.target.value = '';
                this.input.disabled = false;
                this.upload_progress = null;
            },
        }
    };
</script>

<style lang="scss" scoped>
    .file-upload {
        display: inline-block;
        cursor: pointer;
        position: relative;

        > input {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            padding: 0;
            margin: 0;
            z-index: -1;
            display: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
        }

        > .progress {
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, .8);
            color: #000;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    }
</style>
